window.onload = function () {

    // 1.点击注册按钮 登录盒子隐藏  注册盒子显示
    document.querySelector('[type="button"]').onclick = function () {
        // 登录盒子隐藏 
        this.parentNode.parentNode.parentNode.style.display = 'none'
        // 注册盒子显示
        this.parentNode.parentNode.parentNode.nextElementSibling.style.display = 'block'
    }

    // 2.点击已有账号 去登录按钮   注册盒子隐藏 登录盒子显示
    document.querySelector('#regBox a').onclick = function () {
        //  注册盒子隐藏 
        this.parentNode.parentNode.style.display = 'none'
        //  登录盒子显示
        this.parentNode.parentNode.previousElementSibling.style.display = 'block'
    }


    // 3.用户注册/登录 正则校验
    let form = layui.form
    form.verify({
        // 用户名正则校验
        username: [
            /^[\S]{6,12}$/
            , '账号必须6到12位，且不能出现空格'
        ],
        // 密码正则校验
        password: [
            /^[\S]{6,12}$/
            , '密码必须6到12位，且不能出现空格'
        ],
        // 再次确认密码框校验
        repassword: function (value) {
            //获取用户第一次输入的密码框值
            let pwd = document.querySelector('#regBox .password').value
            //判断两次密码框
            if (pwd !== value) {
                return '两次输入的密码不一致,请重新输入'
            }
        }
    })

    //4.注册账号表单的提交事件
    document.querySelector('#regBox form').onsubmit = function (e) {
        e.preventDefault()
        // 发送ajax请求
        axios({
            url: '/api/reguser',
            method: 'POST',
            data: $(this).serialize()
        }).then(({ data: res }) => {
            //成功回调
            // 判断 如果业务状态码没通过 就不需要往下面继续执行了 
            if (res.status !== 0) {
                //layui提示 服务端返回的错误信息
            }
            //  成功
            layer.msg('恭喜您，用户注册成功')
            setTimeout(function () {// 跳转到登录页
                document.querySelector('#regBox form').reset()
                document.querySelector('#regBox a').onclick()
            }, 1000)
        })
    }

    //4.登录账号表单的提交事件
    document.querySelector('#loginBox form').onsubmit = function (e) {
        e.preventDefault()
        // 发送axios请求
        axios({
            url: '/api/login',
            method: 'post',
            data: $(this).serialize()
        }).then(({ data: res }) => {
            //成功回调
            console.log(res)
            if (res.status !== 0) {
                // 失败
                return layer.msg(res.message)
            }
            // 存储用户的token
            localStorage.setItem('token', res.token)
            // 成功
            layer.msg('恭喜您,登录成功!', { anim: 2 }, { time: 500 });
            setTimeout(() => {
                // 一秒后 页面跳转到index.html
                location.href = 'index.html'
            }, 1000);
        });
    }
}

